<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内边距</title>
    <style type="text/css">
        .box1 {
            width: 200px;
            height: 200px;
            background-color: chartreuse;

            /*
                内边距：
                    指的是盒子的内容区与盒子边框之间的距离，一共有四个方向的内边距，可以通过：
                    padding-top、padding-right、padding-bottom、padding-left来设置四个方向的内边距

                    内边距会影响盒子的可见框的大小，元素的背景颜色会延伸到内边距
            */
           /* padding-top: 100px;
            padding-right: 100px;
            padding-bottom: 100px;
            padding-left: 100px;*/

            /*
                简写方式：padding   规则和边框简写规则一致
            */
            padding: 100px 50px 150px;

        }
        .box2 {

            /*
                宽度完全继承父元素内容区的宽度
                高度同理
                设置不同于父元素的背景颜色，就能更好的显示出内边距了
            */
            width: 100%;
            height: 100%;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="box1">

        <!--为了区分内边距和内容区之间的差距，更好的显示内容区-->
        <div class="box2"></div>
    </div>
</body>
</html>